<template>
  <div>
    <el-card style="margin: 10px 0">
      <CategorySelect
        @getCategoryId="getCategoryId"
        :show="scene!=0"
      ></CategorySelect>
    </el-card>

    <el-card>
      <!-- 有三部分切换 -->
      <div v-show="scene == 0">
        <!-- 展示Spu列表的结构 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="margin: 10px 0"
          :disabled="!cForm.category3Id"
          @click="addSpu"
          >添加Spu</el-button
        >
        <el-table style="width: 100%" border :data="spuList">
          <el-table-column
            type="index"
            label="序号"
            width="80px"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="spuName" label="Spu名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="Spu描述" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <hint-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加sku"
                @click="addSku(row)"
              ></hint-button>
              <hint-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改spu"
                @click="updateSpu(row)"
              ></hint-button>
              <hint-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu的sku列表"
                @click="handlerDialog(row)"
              ></hint-button>
               <el-popconfirm :title="`确定删除${row.spuName}？`" @onConfirm="deleteSpu(row)">
                  <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除spu"  slot="reference"></hint-button>
               </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: center"
          :current-page="page"
          :page-sizes="[3, 5, 10]"
          :page-size="limit"
          layout="prev, pager, next, jumper,->,total, sizes"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :total="total"
        >
        </el-pagination>
      </div>
      <SpuForm v-show="scene == 1" @changeScene="changeScene" ref="spuForm"></SpuForm>
      <SkuForm v-show="scene == 2" @changeScenes="changeScenes" ref="skuForm"></SkuForm>
      <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="closeDialog">
         <el-table :data="dialogData" style="width: 100%" border  v-loading="loading" >
          <el-table-column prop="skuName" label="名称" width="width"></el-table-column>
          <el-table-column prop="price" label="价格" width="width"></el-table-column>
          <el-table-column prop="weight" label="重量" width="width"></el-table-column>
          <el-table-column prop="prop" label="默认图片" width="width">
            <template slot-scope="{row,$index}">
              <img :src="row.skuDefaultImg" style="width:100px;height:100px">
            </template>
          </el-table-column>
         </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
//引入子组件
import SpuForm from "./SpuForm";
import SkuForm from "./SkuForm";

export default {
  name: "Spu",
  data() {
    return {
      cForm: {},
      page: 1, //当前第几页
      limit: 3, //每页展示的数据
      total: 0, //分页器一共展示多少条数据
      spuList: [], //spu列表数据
      scene: 0, //0代表展示spu列表数据，1代表展示添加spu|修改spu  2代表添加sku
      dialogTableVisible:false,  // 控制dialog的显示与隐藏
      spu:{},        //保存点击的spu信息
      dialogData:[], //保存dialog需要展示数据
      loading:true
    };
  },
  components: {
    SpuForm,
    SkuForm,
  },
  methods: {
    //点击分页器第几页按钮的回调
    handleCurrentChange(page) {
      this.page = page;
      this.getSpuList();
    },
    //切换每页数据条数的回调
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSpuList();
    },
    //三级联动的自定义事件，可以把子组件的相应的id传递给父组件
    getCategoryId(cForm) {
      this.cForm = cForm;
      //判断是否将数据传递过来
      if (cForm.category3Id) {
        //发请求获取平台属性
        this.getSpuList();
      }
    },
    //获取Spu列表数据的方法
    async getSpuList() {
      //携带三个参数： page ， limit  ， category3Id
      //解构出三级id
      const { category3Id } = this.cForm;
      this.page=this.page==0?1:this.page
      let result = await this.$API.spu.reqSpuList(
        this.page,
        this.limit,
        category3Id
      );
      if (result.code == 200) {
        this.spuList = result.data.records;
        this.total = result.data.total;
      }
    },
    //添加Spu按钮的回调
    addSpu() {
      //添加之前需要把子组件内容清除
      this.$refs.spuForm.spu={
        category3Id: 0,
        //品牌的Id
        tmId: '',
        //描述
        description: "",
        //Spu名称
        spuName: "",
        //收集Spu图片的信息
        spuImageList: [],
        //平台属性与属性值的数据
        spuSaleAttrList: [],
      }
      //清除照片墙数据
      this.$refs.spuForm.spuImageList=[], //存储Spu图片的数据
      this.scene = 1;
      //通知子组件SpuForm发请求--两个
      this.$refs.spuForm.addSpuData(this.cForm.category3Id)
    },
    //修改某一个Spu的回调
    updateSpu(row){
      this.scene = 1;
      //获取子组件SpuForm子组件 调用方法 让其子组件发请求 
     this.$refs.spuForm.initSpuData(row,'upload')
    },
    //自定义事件回调（SpuForm自定义事件）
    changeScene({scene,flag}){
      //flag是为了 区分 保存按钮是 修改的保存|添加的保存
      //切换场景
      this.scene=scene
      //获取数据前判断以下保存类型  增加Spu  重置page为1
      flag=='add'?this.page=1:this.page
      //再次获取列表数据
      this.getSpuList()
    },
    //自定义回调事件（SkuForm自定义事件）
    changeScenes(scene){
      this.scene=scene
    },
    //点击删除某一个Spu的回调
    async deleteSpu(row){
      const spuId = row.id
      try {
        //发送请求删除某一Spu
        await this.$API.spu.reqDeleteSpu(spuId)
        //成功
        //判断当前页SpuList是否只剩一个数据
        this.spuList.length>1?'':this.page-=1
        //重新获取SpuList
        this.getSpuList()
        this.$message.success(`成功删除${row.spuName}`)
      } catch (error) {
        this.$message.error(`删除${row.spuName}失败`)
      }
    },
    //添加Sku
    addSku(row){
      this.scene=2
      //父组件调用子组件的方法，让子组件发请求 （三个）
      this.$refs.skuForm.getData(row,this.cForm)
    },
    //查看Sku列表的回调  
    async handlerDialog(row){
       //点击按钮的时候，dialog应该可见
       this.dialogTableVisible=true
       //保存spu的信息
       this.spu=row
       //获取sku列表的数据进行展示
       let result = await this.$API.spu.reqSkuList(row.id)
       if(result.code==200){
        this.dialogData=result.data
        //获取到消息之后 loading改为 false
        this.loading=false
       }
    },
    //Dialog关闭的回调
    closeDialog(done){
       this.loading=true
       //清除sku列表的数据
       this.dialogData=[]
       //done用来关闭对话框
       done()
    }
  },
};
</script>

<style>
</style>